<template>
  <div class="bg-gray-50 p-4">
    <!-- 关键指标卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <!-- 生产数量卡片 - 红色系（匹配库存分析红色） -->
      <div class="card-gradient-red rounded-lg p-4 text-white shadow-md">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <p class="text-sm font-medium opacity-90">生产数量</p>
            <h3 class="text-3xl font-bold mt-1 text-center">195万</h3>
            <p class="text-sm mt-2 flex items-center justify-center">
              <span>完成率: 89%</span>
            </p>
          </div>
          <div class="bg-white/20 p-3 rounded-lg">
            <i class="fa fa-cube text-xl"></i>
          </div>
        </div>
      </div>

      <!-- 销售额卡片 - 蓝色系（匹配销售额图表蓝色） -->
      <div class="card-gradient-blue rounded-lg p-4 text-white shadow-md">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <p class="text-sm font-medium opacity-90">销售额</p>
            <h3 class="text-3xl font-bold mt-1 text-center">2.98亿</h3>
            <p class="text-sm mt-2 flex items-center justify-center">
              <span>完成率: 91%</span>
            </p>
          </div>
          <div class="bg-white/20 p-3 rounded-lg">
            <i class="fa fa-shopping-bag text-xl"></i>
          </div>
        </div>
      </div>

      <!-- 采购金额卡片 - 青色系（匹配采购数量绿色） -->
      <div class="card-gradient-teal rounded-lg p-4 text-white shadow-md">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <p class="text-sm font-medium opacity-90">采购金额</p>
            <h3 class="text-3xl font-bold mt-1 text-center">0.45亿</h3>
            <p class="text-sm mt-2 flex items-center justify-center">
              <span>完成率: 75%</span>
            </p>
          </div>
          <div class="bg-white/20 p-3 rounded-lg">
            <i class="fa fa-truck text-xl"></i>
          </div>
        </div>
      </div>

      <!-- 库存周转率卡片 - 紫色系 -->
      <div class="card-gradient-purple rounded-lg p-4 text-white shadow-md">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <p class="text-sm font-medium opacity-90">库存周转率</p>
            <h3 class="text-3xl font-bold mt-1 text-center">4.2</h3>
            <p class="text-sm mt-2 flex items-center justify-center">
              <i class="fa fa-refresh mr-1"></i>
              <span>同比: +0.3</span>
            </p>
          </div>
          <div class="relative w-12 h-12">
            <div class="absolute inset-0 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa fa-repeat text-xl"></i>
            </div>
            <!-- 环形背景装饰 -->
            <svg class="absolute inset-0" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="8"/>
              <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="8"
                      stroke-dasharray="251.2" stroke-dashoffset="63" transform="rotate(-90 50 50)"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 左侧：产品库存分析 -->
      <div class="bg-white rounded-lg shadow-md p-4">
        <h3 class="text-base font-semibold text-[#333333] mb-4">产成品库存分析</h3>

        <!-- 环形图 -->
        <div class="relative h-64 flex items-center justify-center">
          <div ref="inventoryChart" class="w-full h-full"></div>
        </div>

        <!-- 仓库位置表格 -->
        <div class="mt-6">
          <table class="min-w-full text-sm">
            <thead>
              <tr class="text-white">
                <th class="py-2 px-3 text-left font-medium">仓库位置</th>
                <th class="py-2 px-3 text-left font-medium">库存总金额</th>
                <th class="py-2 px-3 text-left font-medium">仓库利用率</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-[#f0f2f5]">
              <tr>
                <td class="py-2 px-3 text-[#333333]">北京</td>
                <td class="py-2 px-3 text-[#333333]">457,913</td>
                <td class="py-2 px-3 text-[#333333]">55%</td>
              </tr>
              <tr>
                <td class="py-2 px-3 text-[#333333]">广东</td>
                <td class="py-2 px-3 text-[#333333]">363,843</td>
                <td class="py-2 px-3 text-[#333333]">45%</td>
              </tr>
              <tr>
                <td class="py-2 px-3 text-[#333333]">广西</td>
                <td class="py-2 px-3 text-[#333333]">457,799</td>
                <td class="py-2 px-3 text-[#333333]">42%</td>
              </tr>
              <tr>
                <td class="py-2 px-3 text-[#333333]">河北</td>
                <td class="py-2 px-3 text-[#333333]">432,457</td>
                <td class="py-2 px-3 text-[#333333]">36%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 右侧：销售和采购分析 -->
      <div class="lg:col-span-2 space-y-6">
        <!-- 销售额及完成率月度趋势 -->
        <div class="bg-white rounded-lg shadow-md p-4">
          <h3 class="text-base font-semibold text-[#333333] mb-4">销售额及完成率月度趋势</h3>
          <div ref="salesTrendChart" class="h-72"></div>
        </div>

        <!-- 各产品采购金额/数量/完成率 -->
        <div class="bg-white rounded-lg shadow-md p-4">
          <h3 class="text-base font-semibold text-[#333333] mb-4">各产品采购金额/采购数量/完成率</h3>
          <div ref="purchaseChart" class="h-72"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 图表容器引用
const inventoryChart = ref(null);
const salesTrendChart = ref(null);
const purchaseChart = ref(null);

onMounted(() => {
  initInventoryChart();
  initSalesTrendChart();
  initPurchaseChart();

  // 窗口 resize 适配
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(inventoryChart.value)?.resize();
    echarts.getInstanceByDom(salesTrendChart.value)?.resize();
    echarts.getInstanceByDom(purchaseChart.value)?.resize();
  });
});

// 产品库存分析环形图
function initInventoryChart() {
  const chart = echarts.init(inventoryChart.value);

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        fontSize: 12,
        color: '#666'
      },
      formatter: function(name) {
        const map = {
          '<90': '库龄范围 <90',
          '180-360': '库龄范围 180-360',
          '90-180': '库龄范围 90-180'
        };
        return map[name] || name;
      }
    },
    series: [
      {
        name: '库龄占比',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderWidth: 0
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 30, name: '<90', itemStyle: { color: '#4096ff' } },  // 蓝色系
          { value: 25, name: '180-360', itemStyle: { color: '#52c41a' } },  // 绿色系
          { value: 45, name: '90-180', itemStyle: { color: '#f5222d' } }  // 红色系
        ]
      }
    ]
  };

  chart.setOption(option);
}

// 销售额及完成率月度趋势图
function initSalesTrendChart() {
  const chart = echarts.init(salesTrendChart.value);

  const months = ['2019年1月', '2019年2月', '2019年3月', '2019年4月',
                 '2019年5月', '2019年6月', '2019年7月', '2019年8月',
                 '2019年9月', '2019年10月', '2019年11月', '2019年12月'];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['完成率', '销售额'],
      top: 0,
      right: 10,
      textStyle: {
        fontSize: 12,
        color: '#666'
      },
      itemStyle: {
        color: {
          '完成率': '#fa8c16',
          '销售额': '#4096ff'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLabel: {
        fontSize: 10,
        rotate: 30,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        nameTextStyle: {
          fontSize: 12,
          color: '#666'
        },
        axisLabel: {
          formatter: '{value}M',
          color: '#666'
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f3f4f6'
          }
        }
      },
      {
        type: 'value',
        name: '完成率',
        nameTextStyle: {
          fontSize: 12,
          color: '#666'
        },
        position: 'right',
        max: 100,
        axisLabel: {
          formatter: '{value}%',
          color: '#666'
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [12500, 11000, 12800, 12200, 12400, 12000, 11800, 12200, 12000, 12400, 12500, 12800],
        itemStyle: {
          color: '#4096ff'  // 与销售额卡片同色系
        },
        barWidth: '60%'
      },
      {
        name: '完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [97, 96, 98, 97.5, 97.8, 97.2, 97, 97.3, 97.1, 97.6, 97.5, 98],
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#fa8c16',  // 橙色系
          width: 2
        },
        itemStyle: {
          color: '#fa8c16'
        }
      }
    ]
  };

  chart.setOption(option);
}

// 采购分析图表
function initPurchaseChart() {
  const chart = echarts.init(purchaseChart.value);

  const products = ['产品1', '产品2', '产品3', '产品4', '产品5', '产品6', '产品7', '产品8', '产品9'];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['金额', '数量'],
      top: 0,
      right: 10,
      textStyle: {
        fontSize: 12,
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: products,
      axisLabel: {
        fontSize: 12,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '数值',
        nameTextStyle: {
          fontSize: 12,
          color: '#666'
        },
        axisLabel: {
          color: '#666'
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f3f4f6'
          }
        }
      },
      {
        type: 'value',
        name: '完成率',
        nameTextStyle: {
          fontSize: 12,
          color: '#666'
        },
        position: 'right',
        max: 90,
        axisLabel: {
          formatter: '{value}%',
          color: '#666'
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '金额',
        type: 'bar',
        data: [6500, 4800, 7000, 6000, 5500, 6200, 4500, 7500, 5000],
        itemStyle: {
          color: '#fa8c16'  // 橙色系
        },
        barWidth: '30%'
      },
      {
        name: '数量',
        type: 'bar',
        data: [7000, 6500, 6000, 7500, 6800, 6300, 7200, 6600, 8000],
        itemStyle: {
          color: '#52c41a'  // 绿色系（与采购卡片同色系）
        },
        barWidth: '30%'
      },
      {
        name: '完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [85, 87, 89, 91, 86, 88, 84, 83, 82],
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#f5222d',  // 红色系
          width: 2
        },
        itemStyle: {
          color: '#f5222d'
        }
      }
    ]
  };

  chart.setOption(option);
}
</script>

<style scoped>
/* 自定义卡片渐变色 */
.card-gradient-red {
  background: linear-gradient(to right, #ff6b6b, #ff4757);
}

.card-gradient-blue {
  background: linear-gradient(to right, #4a6fff, #2d5afe);
}

.card-gradient-teal {
  background: linear-gradient(to right, #2dd4bf, #0d9488);
}

.card-gradient-purple {
  background: linear-gradient(to right, #a855f7, #7e22ce);
}

/* 表格样式修正 */
thead tr {
  background-color: #1F77B4 !important;
}

tbody tr td {
  color: #333 !important;
}

/* 标题颜色修正 */
h3 {
  color: #333 !important;
  font-weight: 600 !important;
}
</style>
